<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<!-- 引入jquery文件 -->
<script src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="../data/wlmq.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var geoCoordMap = {
        '乌鲁木齐县': [87.016513,43.281264],
        '达坂城区': [88.303639,43.370862],
        '沙依巴克区': [87.502755,43.708878],
        '头屯河区': [87.327252,43.889933],
        '新市区': [87.575887,43.863044],
        '米东区': [87.654726,44.791146],
        '天山区': [87.637479,43.700695],
        '水磨沟区': [87.650702,43.857745]
    };

    var blockData = new Array();

    var smgqData = [
        [{name:'水磨沟区'}, {name:'达坂城区',value:3}],
        [{name:'水磨沟区'}, {name:'米东区',value:1}],
        [{name:'水磨沟区'}, {name:'沙依巴克区',value:1}],
        [{name:'水磨沟区'}, {name:'天山区',value:1}],
        [{name:'水磨沟区'}, {name:'头屯河区',value:1}],
        [{name:'水磨沟区'}, {name:'乌鲁木齐县',value:1}],
        [{name:'水磨沟区'}, {name:'新市区',value:1}]
    ];

    var wlmqxData = [
        [{name:'乌鲁木齐县'}, {name:'达坂城区',value:3}],
        [{name:'乌鲁木齐县'}, {name:'米东区',value:1}],
        [{name:'乌鲁木齐县'}, {name:'沙依巴克区',value:1}],
        [{name:'乌鲁木齐县'}, {name:'水磨沟区',value:1}],
        [{name:'乌鲁木齐县'}, {name:'天山区',value:1}],
        [{name:'乌鲁木齐县'}, {name:'头屯河区',value:1}],
        [{name:'乌鲁木齐县'}, {name:'新市区',value:1}]
    ];

    var dbcqData = [
        [{name:'达坂城区'}, {name:'乌鲁木齐县',value:5}],
        [{name:'达坂城区'}, {name:'沙依巴克区',value:3}],
        [{name:'达坂城区'}, {name:'头屯河区',value:3}],
        [{name:'达坂城区'}, {name:'新市区',value:5}],
        [{name:'达坂城区'}, {name:'米东区',value:1}],
        [{name:'达坂城区'}, {name:'天山区',value:2}],
        [{name:'达坂城区'}, {name:'水磨沟区',value:1}]
    ];
    var sybkqData = [
        [{name:'沙依巴克区'}, {name:'达坂城区',value:3}],
        [{name:'沙依巴克区'}, {name:'米东区',value:1}],
        [{name:'沙依巴克区'}, {name:'水磨沟区',value:1}],
        [{name:'沙依巴克区'}, {name:'天山区',value:2}],
        [{name:'沙依巴克区'}, {name:'头屯河区',value:1}],
        [{name:'沙依巴克区'}, {name:'乌鲁木齐县',value:1}],
        [{name:'沙依巴克区'}, {name:'新市区',value:2}]
    ];

    var tthData = [
        [{name:'头屯河区'}, {name:'达坂城区',value:3}],
        [{name:'头屯河区'}, {name:'米东区',value:1}],
        [{name:'头屯河区'}, {name:'沙依巴克区',value:1}],
        [{name:'头屯河区'}, {name:'水磨沟区',value:1}],
        [{name:'头屯河区'}, {name:'天山区',value:1}],
        [{name:'头屯河区'}, {name:'乌鲁木齐县',value:1}],
        [{name:'头屯河区'}, {name:'新市区',value:1}]
    ];

    var xsqData = [
        [{name:'新市区'}, {name:'达坂城区',value:3}],
        [{name:'新市区'}, {name:'沙依巴克区',value:2}],
        [{name:'新市区'}, {name:'头屯河区',value:1}],
        [{name:'新市区'}, {name:'乌鲁木齐县',value:2}],
        [{name:'新市区'}, {name:'米东区',value:3}],
        [{name:'新市区'}, {name:'天山区',value:4}],
        [{name:'新市区'}, {name:'水磨沟区',value:5}]
    ];

    var mdqData = [
        [{name:'新市区'}, {name:'米东区',value:1}],
        [{name:'新市区'}, {name:'沙依巴克区',value:2}],
        [{name:'新市区'}, {name:'水磨沟区',value:1}],
        [{name:'新市区'}, {name:'天山区',value:1}],
        [{name:'新市区'}, {name:'头屯河区',value:1}],
        [{name:'新市区'}, {name:'乌鲁木齐县',value:1}],
        [{name:'米东区'}, {name:'达坂城区',value:3}]
    ];

    var tsqData = [
        [{name:'天山区'}, {name:'达坂城区',value:3}],
        [{name:'天山区'}, {name:'米东区',value:1}],
        [{name:'天山区'}, {name:'沙依巴克区',value:3}],
        [{name:'天山区'}, {name:'水磨沟区',value:2}],
        [{name:'天山区'}, {name:'头屯河区',value:1}],
        [{name:'天山区'}, {name:'乌鲁木齐县',value:1}],
        [{name:'天山区'}, {name:'新市区',value:1}]
    ];

    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = geoCoordMap[dataItem[0].name];
            var toCoord = geoCoordMap[dataItem[1].name];
            if (fromCoord && toCoord) {
                res.push({
                    fromName: dataItem[0].name,
                    toName: dataItem[1].name,
                    coords: [fromCoord, toCoord]
                });
            }
        }
        return res;
    };


    blockData.push(smgqData);
    blockData.push(wlmqxData);
    blockData.push(dbcqData);
    blockData.push(sybkqData);
    blockData.push(tthData);
    blockData.push(xsqData);
    blockData.push(mdqData);
    blockData.push(tsqData);



    var color = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
    var series = [];

    // 批量循环各区数据
    blockData.forEach(function (items, j) {
        // 每个区线的颜色随机
        var current_color = color[Math.floor(Math.random()*(color.length-1)+1)];
        // 对各区数据进行遍历，目的为区分线的粗细程度
        items.forEach(function (item, i) {
            series.push({
                name: '1Top10',
                type: 'lines',
                zlevel: 1,
                symbol: 'circle',
                symbolSize: 5,
                lineStyle: {
                    normal: {
                        color: current_color,
                        width: items[i][1].value
                    }
                },
                data: convertData([
                    items[i]
                ])
            });
        });
    });

    series.push({
        name: '香港18区人口密度',
        type: 'map',
        mapType: 'wlmq', // 自定义扩展图表类型
        itemStyle:{
            normal:{label:{show:false}},
            emphasis:{label:{show:true}}
        },
        data:[
            {name: '米东区', value: 30776},
            {name: '沙依巴克区', value: 73050},
            {name: '水磨沟区', value: 46668},
            {name: '天山区', value: 81016},
            {name: '头屯河区', value: 19839},
            {name: '乌鲁木齐县', value: 3295},
            {name: '新市区', value: 71312}
        ]
    });

    option = {
        title : {
            text: '模拟迁徙',
            subtext: '数据纯属虚构',
            left: 'center',
            textStyle : {
                color: '#46bee9'
            }
        },
        geo: {
            map: 'wlmq',
            roam: true
        },
        series: series,
        visualMap: {
            min: 0,
            max: 80000,
            text:['High','Low'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['lightskyblue','yellow', 'orangered']
            }
        },
    };
    myChart.setOption(option);
</script>
</body>
</html>